<template>
  <div id="cc" class="container">
    <div class="reportEntry">
      <h3>
        举报须知
      </h3>
      <p>
        本系统受理反映“四风”问题举报，具体包括公款大吃大喝、公款旅游（国内）、公款出国（境）旅游、违规配备使用公车、违规建设楼堂馆所、津贴补贴违规问题、违规收送礼品礼金、大办婚丧喜庆事宜、提供或接受超标准接待、接受或用公款参与高消费娱乐健身活动、违规出入私人会所、培训疗养机构“四风”问题。
      </p>
    </div>
    <img src="https://api.cloudcpc.com/static/index/images/logo.png" alt="" class="logo">
    <label for="weuiAgree" class="weui-agree">
      <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
      <span class="weui-agree__text">
                    我已经阅读以上条款
            </span>
    </label>
    <div class="formBtn">
      <input type="button" value="提交" id="submit" @click.stop="navToReport">
    </div>
    <div class="js_dialog" id="androidDialog1" v-if="notAggreAble">
      <div class="weui-mask"></div>
      <div class="weui-dialog weui-skin_android">
        <div class="weui-dialog__bd">
          {{alarm}}
        </div>
        <div class="weui-dialog__ft">
          <a  class="weui-dialog__btn  weui-dialog__btn_default weui_cancel" @click.stop="cancel">取消</a>
          <a class="weui-dialog__btn  weui-dialog__btn_primary weui_confim" @click.stop="confirm">确认</a>
        </div>
      </div>
    </div>
  </div>

</template>
<script>

  export default({
    data (){
        return {
          alarm:'请同意以下协议',
          notAggreAble:false
        }
    },
    methods:{
      navToReport(){
        var $aggreAble =$('#weuiAgree').is(':checked');
        if($aggreAble){
          this.$router.push({
            name:'reportForm'
          })
        }else{
          this.notAggreAble =true
        }
      },
      cancel(){
        this.notAggreAble =false
      },
      confirm(){
        this.notAggreAble =false
      }

    }
  })
</script>
<style scoped="">
  .container{
    width: 100%;
    background-image: url(https://api.cloudcpc.com/static/index/images/banner2.jpg);
    height: 100%;
    background-position: center;
    background-size: 7.5rem 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    padding-bottom: 0.52rem;
  }
  .logo{
    position: absolute;
    top: 1.8rem;
    right: 0;
    width: 5.75rem;
    height: 2.84rem;

  }
  ::-webkit-scrollbar {display:none}
  .weui-agree{
    margin-left: 1.02rem
  }
  .weui-agree__checkbox:checked:before{
    color: #e33123 !important
  }

  .weui-agree__checkbox{
    border: 1px solid #f2a096 !important
  }
  input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }
  .reportEntry{
    width: 6.18rem;
    height: 4.9rem;
    margin: 0 auto;
    margin-top: 4.3rem;
    border-radius: 0.2rem;
    -webkit-border-radius:0.2rem;
    border: 1px solid #f5f5f5;
    background: white
  }
  .reportEntry h3{
    font-size: 0.32rem;
    color: #dd2b1d;
    text-align: center;
    padding-top:0.4rem ;
    padding-bottom: 0.25rem
  }
  .reportEntry p{
    padding: 0 0.3rem;
    text-indent:2em;
    color: #666666;
    font-size: 0.26rem;
    line-height:0.44rem
  }
  .checkbox{
    text-align: center
  }

  .formBtn{
    width: 5.42rem;
    height: 0.9rem;
    margin: 0 auto;
    text-align: center;
    margin-top: 0.54rem;
    margin-bottom: 0.4rem;
  }
  input[type=button], input[type=submit], input[type=file], button {
    cursor: pointer;
    -webkit-appearance: none;
  }
  .formBtn input {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #dc291b;
    text-align: center;
    font-size: 0.36rem;
    color: white;
    border: none;
    border-radius: 0.16rem;
    -webkit-border-radius: 0.16rem;
  }
</style>
